<template>
  <div class="notice-page">
    <el-page-header title="返回" @back="() => $router.back()">
      <template #content>
        <span class="page-title">消息通知</span>
      </template>
    </el-page-header>

    <!-- 工具栏 -->
    <el-row justify="space-between" align="middle" class="tool-bar">
      <el-button
          :type="filterType === 'all' ? 'primary' : ''"
          text
          @click="filterType = 'all'"
      >
        全部
      </el-button>
      <el-button
          :type="filterType === 'unread' ? 'primary' : ''"
          text
          @click="filterType = 'unread'"
      >
        未读
      </el-button>
      <el-button type="primary" link @click="onReadAll">全部已读</el-button>
    </el-row>

    <!-- 列表 -->
    <el-scrollbar height="calc(100vh - 160px)">
      <div v-if="filteredList.length === 0" class="empty">暂无通知</div>

      <div
          v-for="item in filteredList"
          :key="item.id"
          class="notice-card"
          :class="{ unread: !item.read }"
          @click="onClick(item)"
      >
        <div class="notice-icon">
          <el-icon size="20">
            <component :is="iconMap[item.type]" />
          </el-icon>
        </div>
        <div class="notice-body">
          <div class="title">{{ item.title }}</div>
          <div class="content">{{ item.content }}</div>
          <div class="time">{{ formatTime(item.createdAt) }}</div>
        </div>
        <div class="notice-extra">
          <el-tag v-if="!item.read" size="small" type="danger">未读</el-tag>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import { useNoticeStore } from '@/stores/notice'
import dayjs from 'dayjs'
import {
  Bell,
  Coin,
  Edit,
  Warning
} from '@element-plus/icons-vue'

/* store */
const noticeStore = useNoticeStore()
noticeStore.getList()

/* 筛选 */
const filterType = ref<'all' | 'unread'>('all')
const filteredList = computed(() =>
    filterType.value === 'unread'
        ? noticeStore.list.filter((v) => !v.read)
        : noticeStore.list
)

/* 事件 */
const onReadAll = () => noticeStore.readAll()
const onClick = (item) => {
  if (!item.read) noticeStore.readOne(item.id)
}
const formatTime = (t) => dayjs(t).format('MM-DD HH:mm')

/* 图标映射 */
const iconMap = {
  system: Warning,
  appointment: Edit,
  payment: Coin,
  default: Bell
}
</script>

<style scoped lang="scss">
.notice-page {
  padding: 16px;
  background: #fff;
  border-radius: 8px;
}
.page-title {
  font-size: 16px;
  font-weight: 500;
}
.tool-bar {
  margin: 16px 0;
}
.empty {
  text-align: center;
  padding: 60px 0;
  color: var(--el-text-color-secondary);
}
.notice-card {
  display: flex;
  align-items: flex-start;
  padding: 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
  &.unread {
    background: var(--el-color-primary-light-9);
  }
  &:hover {
    background: var(--el-fill-color-light);
  }
  .notice-icon {
    margin-right: 12px;
    color: var(--el-color-primary);
  }
  .notice-body {
    flex: 1;
    .title {
      font-weight: 500;
      margin-bottom: 4px;
    }
    .content {
      font-size: 13px;
      color: var(--el-text-color-regular);
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .time {
      font-size: 12px;
      color: var(--el-text-color-secondary);
      margin-top: 4px;
    }
  }
  .notice-extra {
    margin-left: 12px;
  }
}
</style>